<template>
  <view id="home">
    <!-- banner -->
    <!-- <view class="banner">
      <u-swiper :list="list1"></u-swiper>
      <view class="mask"></view>
    </view> -->

    <!-- 疫情面板 -->
    <view class="header-box">
      <view class="mask"></view>
      <view class="epidemic-situation-panel">
        <view class="panel-title">全球疫情数据(含港澳台)</view>
        <u-skeleton
          :loading="loadingCountResult"
          rows="5"
          :animate="true"
        ></u-skeleton>
        <view class="count-panel" v-if="countResult.lastUpdateTime != null">
          <u-row customStyle="margin-bottom: 30rpx">
            <u-col span="4">
              <view class="count-item">
                <view class="count-name">境外输入</view>
                <view class="count count-1">{{
                  countResult.chinaTotal.total.input
                }}</view>
                <view class="add-count"
                  >较昨日<span class="count-1"
                    >+{{ countResult.chinaTotal.today.input }}</span
                  ></view
                >
              </view>
            </u-col>
            <u-col span="4">
              <view class="count-item">
                <view class="count-name">无症状感染者</view>
                <view class="count count-2">{{
                  countResult.chinaTotal.extData.noSymptom
                }}</view>
                <view class="add-count"
                  >较昨日<span class="count-2"
                    >+{{
                      countResult.chinaTotal.extData.incrNoSymptom == null
                        ? 0
                        : countResult.chinaTotal.extData.incrNoSymptom
                    }}</span
                  ></view
                >
              </view>
            </u-col>
            <u-col span="4">
              <view class="count-item">
                <view class="count-name">现有确诊</view>
                <view class="count count-3">{{
                  countResult.chinaTotal.total.confirm -
                  countResult.chinaTotal.total.dead -
                  countResult.chinaTotal.total.heal
                }}</view>
                <view class="add-count"
                  >较昨日<span class="count-3"
                    >+{{
                      countResult.chinaTotal.today.confirm -
                      countResult.chinaTotal.today.dead -
                      countResult.chinaTotal.today.heal
                    }}</span
                  ></view
                >
              </view>
            </u-col>
          </u-row>

          <u-row customStyle="margin-bottom: 20rpx">
            <u-col span="4">
              <view class="count-item">
                <view class="count-name">累计确诊</view>
                <view class="count count-4">{{
                  countResult.chinaTotal.total.confirm
                }}</view>
                <view class="add-count"
                  >较昨日<span class="count-4"
                    >+{{ countResult.chinaTotal.today.confirm }}</span
                  ></view
                >
              </view>
            </u-col>
            <u-col span="4">
              <view class="count-item">
                <view class="count-name">累计死亡</view>
                <view class="count count-5">{{
                  countResult.chinaTotal.total.dead
                }}</view>
                <view class="add-count"
                  >较昨日<span class="count-5"
                    >+{{ countResult.chinaTotal.today.dead }}</span
                  ></view
                >
              </view>
            </u-col>
            <u-col span="4">
              <view class="count-item">
                <view class="count-name">累计治愈</view>
                <view class="count count-6">{{
                  countResult.chinaTotal.total.heal
                }}</view>
                <view class="add-count"
                  >较昨日<span class="count-6"
                    >+{{ countResult.chinaTotal.today.heal }}</span
                  ></view
                >
              </view>
            </u-col>
          </u-row>
          <view class="last-time"
            ><span>截止至: </span><i class="iconfont icon-time"></i
            >{{ countResult.lastUpdateTime }}</view
          >
        </view>
      </view>
    </view>

    <!-- 入口 -->
    <view class="access btn-card">
      <view class="header">快捷入口</view>
      <view class="access-container">
        <view
          class="access-btn"
          @click="linkTo('/pages/NucleicAcidQuery/index')"
        >
          <i class="iconfont icon-locationfill"></i>
          <view class="label">核酸地点查询</view>
        </view>
        <view
          class="access-btn"
          @click="linkTo('/pages/SmartLeadingExamining/index')"
        >
          <i class="iconfont icon-ios-body"></i>
          <view class="label">智能导诊</view>
        </view>
      </view>
    </view>

    <!-- 快捷查询 -->
    <view class="quick-search btn-card">
      <view class="header">快捷查询</view>
      <view class="search-container">
        <view
          class="search-btn-item"
          @click="linkTo('/pages/SearchHospital/index')"
        >
          <view class="icon">
            <i class="iconfont icon-hospital"></i>
          </view>
          <view class="item-label">查医院</view>
        </view>
        <view class="search-btn-item" @click="linkTo('/pages/Vaccine/index')">
          <view class="icon">
            <i class="iconfont icon-injector"></i>
          </view>
          <view class="item-label">查疫苗</view>
        </view>
        <view class="search-btn-item">
          <view class="icon">
            <i class="iconfont icon-doctor"></i>
          </view>
          <view class="item-label">找医生</view>
        </view>
        <view class="search-btn-item">
          <view class="icon">
            <i class="iconfont icon-setting"></i>
          </view>
          <view class="item-label">查设施</view>
        </view>
      </view>
    </view>

    <!--  -->
  </view>
</template>

<script>
import { queryEpidemicSituationCount } from "@/api";
export default {
  name: "Home",
  data() {
    return {
      list1: [
        "https://cdn.uviewui.com/uview/swiper/swiper1.png",
        "https://cdn.uviewui.com/uview/swiper/swiper2.png",
        "https://cdn.uviewui.com/uview/swiper/swiper3.png",
      ],

      countResult: {},
      loadingCountResult: true,
    };
  },

  watch: {
    countResult(newValue) {
      if (newValue.lastUpdateTime !== null) {
        this.loadingCountResult = false;
      }
    },
  },

  methods: {
    linkTo(url) {
      uni.navigateTo({
        url,
      });
    },
  },

  async mounted() {
    let countResult = await queryEpidemicSituationCount();
    this.countResult = countResult.data.data;
  },
};
</script>


<style lang='scss' scoped>
#home {
  // padding: 40rpx;
  .header-box {
    position: relative;
    padding-top: 40rpx;
    .mask {
      background: $themeColor1;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 50%;
      z-index: -1;
    }
    .epidemic-situation-panel {
      padding: 30rpx;
      background: #fff;
      border-radius: 20rpx;
      margin: 0 40rpx;
      box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.05);
      .panel-title {
        font-size: 30rpx;
        padding-left: 10rpx;
        margin-bottom: 30rpx;
      }

      .count-panel {
        .count-item {
          display: flex;
          flex-direction: column;
          align-items: center;

          .count-name {
            font-size: 26rpx;
            font-weight: bold;
          }
          .count {
            margin-top: 10rpx;
            font-size: 35rpx;
          }
          .add-count {
            margin-top: 10rpx;
            font-size: 24rpx;
            color: #999;
            span {
              margin-left: 5rpx;
            }
          }

          .count-1 {
            color: #ffa352;
          }
          .count-2 {
            color: #8a3435;
          }
          .count-3 {
            color: #e44b3e;
          }
          .count-4 {
            color: #a31d13;
          }
          .count-5 {
            color: #333333;
          }
          .count-6 {
            color: #34aa70;
          }
        }
      }

      .last-time {
        margin-left: 10rpx;
        font-size: 26rpx;
        color: #999;
        margin-top: 30rpx;
        display: flex;
        align-items: center;
        i {
          margin-left: 20rpx;
        }
      }
    }
  }

  .banner {
    position: relative;
    .mask {
      background: $themeColor1;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 50%;
      z-index: -1;
    }
  }

  .btn-card {
    // margin-top: 0rpx;
    margin: 40rpx;
    padding: 40rpx;
    background: #fff;
    border-radius: 20rpx;
    box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.05);
    .header {
      font-size: 32rpx;
    }
  }

  .access {
    .access-container {
      display: flex;
      justify-content: space-between;
      margin-top: 30rpx;
      .access-btn {
        display: flex;
        align-items: center;
        flex-direction: column;
        // height: 200rpx;
        padding: 40rpx;
        justify-content: center;
        border-radius: 20rpx;
        i {
          &.icon-locationfill {
            font-size: 80rpx;
            // color: $mo-orange;
            color: #fff;
          }
        }
        i {
          &.icon-ios-body {
            font-size: 80rpx;
            // color: $themeColor1;
            color: #fff;
          }
        }
        &:nth-child(1) {
          flex: 1;
          background: $mo-orange-lite;
          margin-right: 20rpx;
          .label {
            font-size: 28rpx;
            margin-top: 30rpx;
            color: #fff;
          }
        }
        &:nth-child(2) {
          flex: 1;
          background: $themeColor1-lite;
          margin-left: 20rpx;
          .label {
            font-size: 28rpx;
            margin-top: 30rpx;
            color: #fff;
          }
        }
      }
    }
  }

  .quick-search {
    .search-container {
      margin-top: 30rpx;
      justify-content: space-between;
      display: flex;
      .search-btn-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        .icon {
          display: inline-block;
          i {
            font-size: 40rpx;
            padding: 25rpx;
            background: $themeColor2;
            color: #fff;
            border-radius: 20rpx;
          }
        }
        .item-label {
          margin-top: 10rpx;
          font-size: 28rpx;
          color: #666;
        }
      }
    }
  }
}
</style>
